<template>
  <div class="blog-detail-container">
    <h1>{{ blog.title }}</h1>
    <div class="aside">
      <span>日期: {{ blog.createDate }}</span>
      <span>浏览: {{ blog.scanNumber }}</span>
      <a href="#data-form-container">评论: {{ blog.commentNumber }}</a>
      <RouterLink :to="{ name: 'CategoryBlog', params: { categoryId: blog.id } }">{{ blog.category.name }}</RouterLink>
    </div>
    <div class="markdown-body" v-html="blog.htmlContent"></div>
  </div>
</template>
<script lang="ts" setup>
import 'highlight.js/styles/github.css'
import '@/styles/markdown.css'

interface Props {
  blog: any
}

defineProps<Props>()
</script>
<style lang="less" scoped>
@import '@/styles/var.less';

.aside {
  font-size: 12px;
  color: @gray;

  span,
  a {
    margin-right: 15px;
  }
}

.markdown-body {
  margin: 2em 0;
}
</style>